import React from "react";
import { KeywordWithName } from "../../../../../utils/domain/keyword";
import styles from "./Item.module.css";
import { keywordApi } from "../../../../../utils/backend/server";

export const Item = (props: {
  direct: boolean;
  clickHandler: (item: KeywordWithName) => void;
  entry: KeywordWithName;
  styles?: object;
}) => {
  const onClick = () => {
    if (props.direct) {
      props.clickHandler(props.entry);
      return;
    }

    keywordApi.updateRanks(props.entry);
    location.href = props.entry.url;
  };
  const slient = (e: React.MouseEvent | React.TouchEvent) => {
    e.preventDefault();
    e.stopPropagation();
  };

  return (
    <div
      className={[styles.entry, props.styles ? props.styles : ""].join(" ")}
      title={props.entry.url}
      key={props.entry.keyName}
    >
      <div
        className={styles.top}
        onContextMenuCapture={(ev) => {
          slient(ev);
          props.clickHandler(props.entry);
        }}
        onClick={onClick}
      >
        {props.entry.name}
      </div>
      <div className={styles.bottom}>{props.entry.keyName}</div>
    </div>
  );
};
